<template>
  <el-upload action="#" list-type="picture-card"  :limit='limit' :auto-upload="false">
     <template #tip>
      <div class="el-upload__tip">{{title}}</div>
    </template>
    <el-icon><Plus /></el-icon>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <el-icon><zoom-in /></el-icon>
          </span> -->
          <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <el-icon><Download /></el-icon>
          </span> -->
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script lang="ts" setup>
import { UploadFilled } from '@element-plus/icons-vue'
import { getCurrentInstance, onActivated, onMounted, reactive, ref } from 'vue'
import { compressImage } from '@/utils/compress.js'
import { ElMessage, UploadProps, UploadRawFile, genFileId } from 'element-plus'
import { uploadFile } from '@/api/system/upload'
import { invoiceOcr } from '@/api/invoice'
import { uploadBox } from '@/api/boxManage/index'
import { uploadYard, getYardInfo } from '@/api/boxManage/yard'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

const emit = defineEmits(['ocrIDCard', 'getImgList', 'uploadSuccess'])

const props = defineProps({
  // 父组件向子组件传值
  type: {// img/file/excel_box/excel_yard/zip_rar_jpg_png
    type: String,
    default: 'img'
  },
  needOcr: {
    type: Boolean,
    default: false
  },
  drag: { // 是否拖拽上传
    type: Boolean,
    default: true
  },
  limit: { // 限制上传数量 （达上限后，替换已上传文件）
    type: Number,
    default: 1
  },
  limitForce: { // 强制上传数量 （达上限后，不替换已上传文件，给出提示。注： limitForce 小于 limit 才生效）
    type: Number,
    default: 1
  },
  isFronface: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: '上传文件'
  },
})

</script>
<style lang="less" scoped>

</style>
